<template>
  <div class="main">
      <img class="test" src="../assets/login.png ">
    <div class="common-layout">
      <el-container>
        <el-aside >
          <img class="asideImg" src="../assets/LogosDev.svg">
        </el-aside>
        <el-main>

          <div class="loginTile" style="text-align: center;font-size: 20px;margin-top: 145px"> 管理员登录</div>
          <el-form ref="loginRefForm" :model="user" :rules="loginRules" label-width="auto" style="max-width: 400px">
            <el-form-item label="账号：" prop="userName">
              <el-input v-model="user.userName"/>
            </el-form-item>
            <el-form-item label="密码：" prop="userPwd">
              <el-input type="password" v-model="user.userPwd"/>
            </el-form-item>

            <el-form-item label=" ">
              <el-button style="width: 350px;" type="primary" @click="login">登 录</el-button>
            </el-form-item>

          </el-form>
        </el-main>
      </el-container>
    </div>
  </div>

</template>

<script>
import {getTokenKey, messageTip} from "../util/util.js";
import {doGet, doPost} from "../http/httpRequest.js";
import qs from "qs";

export default {
  name: "LoginView",
  mounted() {

    // 页面渲染完，调用这个函数，判断是否有登录信息
    // this.freeLogin();
    window.addEventListener('keyup', this.onSubmit, false);
  },

  data() {
    return {
      //对象变量定义，是{}
      user: {},
      //字符串变量定义，是''
      name: '',
      //数字变量定义，是0
      age: 0,
      //数组变量定义，是[]
      arr: [],
      //list集合对象(对象数组)，是[{}]
      userList: [{}],
      //定义登录表单的验证规则
      loginRules: {
        //定义账号的验证规则，规则可以有多个，所以是数组
        userName: [
          {required: true, message: '请输入登录账号', trigger: 'blur'}
        ],
        //定义密码的验证规则，规则可以有多个，所以是数组
        userPwd: [
          {required: true, message: '请输入登录密码', trigger: 'blur'},
          {min: 6, max: 16, message: '登录密码长度为6-16位', trigger: 'blur'}
        ]
      }
    }
  },
  //页面上需要使用功能的js函数，都在methods属性中定义
  methods: {

    destroyed() {
      window.removeEventListener('keyup', this.onSubmit, false)
    },
//监听到键盘敲击就会执行 onSubmit方法，如果是敲击的回车键 e.keyCode就是13或者100就调用登录方法handleLogin
    onSubmit(e) {
      // debugger
      if (e.keyCode === 13 || e.keyCode === 100) {
        this.login(); // 登录函数
      }
    },
    //登录函数
    login() {
      //提交前验证输入框的合法性
      this.$refs.loginRefForm.validate((isValid) => {
        //isValid是验证后的结果，如果是true表示验证通过，否则未通过
        if (isValid) {
          // let data = qs.stringify(this.user,{encode: false})
          // console.log(data)
          doPost("/admin/user/login", this.user).then((resp) => { // 登录请求  resp为后端响应的数据
            console.log(resp)
            if (resp.data.code === 200) {
              localStorage.setItem(getTokenKey(),this.user.userName);
              localStorage.setItem("token",resp.data.data.token);

              window.location.href = "/dashboard"  //页面跳转
            } else {
              messageTip(resp.data.msg, "error")
            }
          });
        }
      })
    },
  }
}
</script>

<style scoped>

.test { /* div的CSS样式 */
  /*display: inline-block;*/
  position: absolute;
  width: 100%;
  height: 100%;
}

.common-layout {
  position: absolute;
  background-color: #f9f9f9;
  width: 1100px;
  height: 600px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 20px;

}

.el-aside {
  width: 45%;
  text-align: center;
  height: 600px;
  /*background-color: #eff0f4;*/
  border-radius: 20px 0 0 20px;
}

.el-main {
  height: 500px;
}

.asideImg {

  width: 400px;
  margin-top: 230px;
  margin-left: 12px;
}

.el-form {
  margin-left: 80px;
  margin-top: 25px;
}
</style>